<html>
  <head>
    <title><%= fontName %></title>
    <link href="./<%= fontName %>.css" rel="stylesheet">
    <style>
      body { font-family: Gill Sans; text-align: center; background: #f7f7f7 }
      body > h1 { color: #666; margin: 1em 0 }
      .glyph { padding: 0 }
      .glyph > li { display: inline-block; margin: .3em .2em; width: 5em; height: 6.5em; background: #fff; border-radius: .5em; position: relative }
      .glyph > li span:first-child { display: block; margin-top: .1em; font-size: 4em; line-height: 0 }
      .glyph-name { font-size: .8em; color: #999; display: block }
      .glyph-codepoint { color: #999; font-family: monospace }
    </style>
  </head>
  <body>
    <h1><%= fontName %></h1>
    <ul class="glyph"><% _.each(glyphs, function(glyph) { %>
      <li>
        <span class="<%= className %>-<%= glyph.name %>"></span>
        <span class="glyph-name"><%= glyph.name %></span>
        <span class="glyph-codepoint"><%= glyph.codepoint.toString(16).toUpperCase() %></span>
      </li><% }); %>
    </ul>
  </body>
</html>
